<!-- Author:Rain -->

<template>
    <div class="rain-form-item">
        <div class="rain-item-lable">
            <span>{{ title }}</span>
        </div>
        <div class="rain-item-content">
            <div class="radio-group radio-group-rectangle">
                <label @click="todo(index)" v-for="item,index in option" :key="index"  :class="{'radio-checked':select==index}" class="radio radio-item">
                    <span class="radio-inner">
                        <input type="radio" :value="item" class="radio-input" name="radioGroup_rain">
                    </span>{{ item }}
                </label>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="rain-input">
let props = defineProps(["title", "value","option"])
let emit = defineEmits(["sendSelect"])
const { value } = markRaw(props)
let select=ref(value)

function todo(index :number){
    select.value=index
    
    emit("sendSelect",select.value)
}

</script>

<style scoped>
@import url("./css/formitems.css");
.radio-group {
    display: flex;
    justify-content: space-between;
    /* padding-right: 45px; */
    width: 300px;
}

.radio-group-rectangle .radio-item {
    width: 60%;
    min-width: auto;
    line-height: 42px;
    border-radius: 8px;
    border-color: #e6e6e6;
    color: #999;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    border: 1px solid #e3e7ed;
    background-color: #fff;
    position: relative;
}

.radio-group-rectangle .radio-item:not(:last-child) {
    margin-right: 20px;
    white-space: nowrap;
    position: relative;
}

.radio-group-rectangle .radio-checked {
    background: rgba(0, 190, 189, .1);
    border: 1px solid var(--themeColor);
    color: var(--themeColor);
}

.radio-input {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    opacity: 0;
    cursor: pointer;
}
</style>